<script setup lang='ts'>
import { ref, watch } from 'vue'
type defaultValueType = [number, number, number, number]
const props = withDefaults(defineProps<{
    modelValue?: defaultValueType,
    readonly?: boolean,
    type?: string,
    defaultValue: any
}>(), {
    readonly: false,
    //@ts-ignore
    modelValue: [-180.0000000,-90.0000000, 180.0000000 , 90.0000000],
    type: 'rectangle',
})
const mouseFlag = ref(false)
const list: any = ref([])
watch(() => props.modelValue, (val) => {
    list.value = []
    if (val) {
        val.forEach((item) => {
            list.value.push(Number(Number(item).toFixed(7)))
        })
    } else {
        list.value = [null, null, null, null]
    }
}, { immediate: true })
const emits = defineEmits(["update:modelValue"]);
const inputHandler = (e: any, numberValues: defaultValueType | undefined, num: number) => {
    if (numberValues === undefined) return
    let numberArr = [...numberValues]
    let targetValue
    targetValue = (e.target as HTMLInputElement).value as any;
    let min
    let max
    if (num === 0 || num === 2) {
        min = -180
        max = 180
    } else if (num === 1 || num === 3) {
        min = -90
        max = 90
    }
    if (min !== undefined) {
        if (targetValue < min) {
            targetValue = min
        }
    }
    if (max !== undefined) {
        if (targetValue > max) {
            targetValue = max
        }
    }
    numberArr[num] = Number(targetValue)
    emits('update:modelValue', numberArr)
}
const inputHandler2 = (e: any, numberValues: defaultValueType | undefined, num: number) => {
    if (numberValues === undefined) return
    let numberArr = [...numberValues]
    numberArr[num] = Number(e.target.value)
    emits('update:modelValue', numberArr)
}
const resetDefult = () => {
    if (props.defaultValue) {
        emits('update:modelValue', props.defaultValue)
    }
}
</script>

<template>

    <div v-if="type === 'rectangle'" class="number4">
        <div class="number_input">
            <div class="number_input_index">
                <label for="">{{ '西' }}：</label>
                <div> <input type="number" class="input_number" :disabled="readonly" :value="list[0]"
                        @blur="inputHandler($event, modelValue, 0)" @keydown.enter="inputHandler($event, modelValue, 0)"
                        step="0.0000001" /></div>
            </div>
            <div class="number_input_index">
                <label for="">{{ '东' }}：</label>
                <div><input type="number" class="input_number" :disabled="readonly" :value="list[2]"
                        @blur="inputHandler($event, modelValue, 2)" @keydown.enter="inputHandler($event, modelValue, 2)"
                        step="0.0000001" /></div>
            </div>
            <div class="number_input_index">
                <label for="">{{ '南' }}：</label>
                <div> <input type="number" class="input_number" :disabled="readonly" :value="list[1]"
                        @blur="inputHandler($event, modelValue, 1)" @keydown.enter="inputHandler($event, modelValue, 1)"
                        step="0.0000001" /></div>
            </div>
            <div class="number_input_index">
                <label for="">{{ '北' }}：</label>
                <div> <input type="number" class="input_number" :disabled="readonly" :value="list[3]"
                        @blur="inputHandler($event, modelValue, 3)" @keydown.enter="inputHandler($event, modelValue, 3)"
                        step="0.0000001" /></div>
            </div>
        </div>
        <div class="checkbox1">
            <div v-if="!readonly && defaultValue !== undefined && ((modelValue[0] !== defaultValue[0]) || (modelValue[1] !== defaultValue[1]) || (modelValue[2] !== defaultValue[2]) || (modelValue[3] !== defaultValue[3]))"
                class="checkbox" @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true"
                @mouseout="mouseFlag = false">
                <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                    :size="14" />
            </div>
        </div>
    </div>
    <div v-else class="number4">
        <div class="number_input_normal">
            <div v-for="(_, index) in modelValue ">
                <input :key="index" type="number" class="input_number" :disabled="readonly" :value="modelValue[index]"
                    @blur="inputHandler2($event, modelValue, index)" />
            </div>
        </div>
        <div class="checkbox1">
            <div v-if="!readonly && defaultValue !== undefined && ((modelValue[0] !== defaultValue[0]) || (modelValue[1] !== defaultValue[1]) || (modelValue[2] !== defaultValue[2]) || (modelValue[3] !== defaultValue[3]))"
                class="checkbox" @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true"
                @mouseout="mouseFlag = false">
                <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                    :size="14" />
            </div>
        </div>
    </div>

</template>

<style scoped>
.number4 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.number_input {
    flex: 1;
    display: flex;
    flex-direction: column;

}

.number_input_normal {
    flex: 1;
    display: flex;
}

.number_input_normal>div {
    flex: 1;
}

.number_input_normal>div>input {
    width: 100%;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}

.number_input>.number_input_index {
    width: 100%;
    display: flex;
    margin-bottom: 6px;
}

.number_input>.number_input_index>label {
    display: inline-block;
    width: 20px;
}

.number_input>.number_input_index>div {
    flex: 1;
}

.number_input>.number_input_index>div>input {
    width: 100%;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    margin-right: 0;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
}

.checkbox1 {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-top: 2px;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.number_input_normal>div>input:hover,
.number_input>.number_input_index>div>input:hover {
    border: 1px solid rgba(44, 104, 247, 1);
}

.number_input_normal>div>input:focus,
.number_input>.number_input_index>div>input:focus {
    border: 1px solid #2c68f7;
}

.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}
</style>
